<template>
  <a-card title="工单汇总" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
    <div class="sheet-count">
      <div class="count-item" v-for="(sheetcount,index) in sheetCountData" :key="index">
        <h2>{{sheetcount.value}}</h2>
        <p>{{sheetcount.name}}</p>
      </div>
    </div>
  </a-card>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
export default {
  name: 'AlarmSummary',
  components: {
  },
  data () {
    return {
      sheetCountData: [
        { name: '本年累计工单', value: 8388000 },
        { name: '本月累计工单', value: 3242340 },
        { name: '今日累计工单', value: 148880 },
        { name: '超时工单', value: 140 },
        { name: '未完结工单', value: 40 },
        { name: '未指派工单', value: 400 }
      ]
    }
  },
  created () {
  },
  mounted () {
    // this.getalArmHandleRate()
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
  .sheet-count{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content:space-between;
    .count-item{
      width: 31%;
      overflow: hidden;
      text-align: center;
      background: #4aa9d8;
      margin-top: 5px;
      margin-bottom: 5px;
      h2{
        font-size: 25px;
        padding: 10px 0;
        margin: 0;
        color: #304553;
      }
      p{
        color: #fff;
        font-weight: 500;
      }
    }
  }
</style>
